<template>
	<div class="buysection" v-if="shopcar.data.length != 0">
		<div class="prodlist">
			<div class="allprod">
				<span>
					<img v-show="!shopcar.isSelectAll" @click="selectAll" src="../assets/images/c01.png" alt="" />
					<img v-show="shopcar.isSelectAll" @click="selectAll" src="../assets/images/c02.png" alt="" />
				</span>
				<span>
						<img src="http://m.wangjiu.com/htmlResource/images/o05.png"/>
						<span>网酒网</span>
				</span>
			</div>
			<div class="prodeon">
				<div class="prodetail">
					<div class="liston" v-for="(v, i) in shopcar.data" :key="v.pid">
						<span>
							<img v-show="!v.isSelected" @click="changeSelected(v.pid)" src="../assets/images/c01.png" alt="" />
							<img v-show="v.isSelected" @click="changeSelected(v.pid)" src="../assets/images/c02.png" alt="" />
						</span>
						<div class="prodOn">
							<router-link class="prodImg" :to="'/detail/' + v.pid">
								<img  :src="'http://img0.wangjiu.com/' + v.product_main_image">
							</router-link>
							<div class="toTitle" >
								<router-link :to="'/detail/' +v.pid">{{ v.product_name }}</router-link>
								<p>{{ v.english_name }}</p>
								<p>￥{{ v.final_price }}</p>
							</div>
							<div class="prodCount" v-show="!isShow">
								<p>x{{v.count}}</p>
							</div>
							<div class="prodCount" v-show="isShow">
								<div ref="down" @click="sub(v.pid)">
									-
								</div>
								<input type="text" message='count' v-model="v.count" />
								<div ref="up" @click="add(v.pid)">
									+
								</div>
							</div>
						</div>
					<div @click="deleteMsg(v.pid)" class="delbtn">
						<span>删除</span>
					</div>
					</div>
					
				</div>
			</div>
		</div>
		<!--{{totalPrice}}-->
		<div class="bfoot">
			<span class="alluse">
				<img v-show="!shopcar.isSelectAll" @click="selectAll" class="kong" src="../assets/images/c01.png" alt="" />
				<img v-show="shopcar.isSelectAll" @click="selectAll" class="on" src="../assets/images/c02.png" alt="" />
			</span>
			<span>全选</span>
			<div class="totalInfo" v-show="!isShow">
				<p class="jstop">
					<i>合计：</i>
					<!--<span v-show="!shopcar.isSelectAll">¥0.00</span>-->
					<span>¥{{ totalPrice }}.00</span>
				</p>
				<p class="jsbtm">
					<i>已优惠</i>
					<span>¥0.00</span>
				</p>
			</div>
			<div  class="jiesuanBtn">结算</div>

		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import VueResource from 'vue-resource'
	import { MessageBox } from 'mint-ui'
	import { mapGetters, mapState, mapMutations } from 'vuex'
	
	export default {
		props:{
			isShow:{
				type:Boolean,
				required:true
			}
		},
		data() {
			return {
				count: 1,
				isHide: true,
				isActive: true,
				isWant:false,
				isOn:false,
//				isAll:false
				
			}
		},
		computed:{
			...mapState(['shopcar']),
			...mapGetters({
				// products: 'cartProducts',
				totalPrice: 'totalPrice'
			}),
			total(){
				return this.products.reduce((oldValue,newValue)=>{
					return oldValue + newValue.price * newValue.count
				})
			}
		},
		methods: {
			deleteMsg(pid){
				MessageBox.confirm('确定删除？').then(action=>{
		  			this.$store.commit('del',pid)
		  		});
			},
			...mapMutations([
				'add', 
				'sub', 
				'changeSelected',
				'selectAll',
				'del'
			]),
			WantOne(){
				this.isWant = true;
				this.isOn = true;
				console.log(this.isWant);
			},
			WantTwo(){
				this.isWant = false;
				this.isOn = false;
				console.log(this.isWant);
				
			},
			OnOne(){
				this.isOn = true;
				this.isWant = true;
			},
			OnTwo(){
				this.isOn = false;
				this.isWant = false
				
			}
		},
		mounted() {

		}
	}
</script>

<style>

</style>